/* eslint-disable @typescript-eslint/no-explicit-any */
// import React from 'react';
import type { FormProps } from 'antd';
import styles from './login.module.css'
import { Button, Form, Input, Select } from 'antd';
import api from '../../api/request'
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { useRef, useState } from 'react';

type FieldType = {
  username?: string;
  password?: string;
};
function App() {

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    api.post('/login', {
      username: values.username,
      password: values.password
    }).then((res) => {
      // alert('成功')
      nav('/index')
      localStorage.setItem('userinfo', JSON.stringify(res.data.userInfo))
      localStorage.setItem('role', res.data.userInfo.role)
    })
  };

  const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const nav = useNavigate()
  const { t, i18n } = useTranslation()
  const qh = (e: string) => {
    i18n.changeLanguage(e)
  }

  // 随机验证码

  const captchaRef = useRef(null)
  const randomCaptcha = () => {
    const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    let result = ''
    for (let i = 0; i < 4; i++) {
      result += chars.charAt(Math.floor(Math.random() * chars.length))
    }
    return result
  }
  const [captcha, setCaptcha] = useState(randomCaptcha())
  // 刷新验证码
  const refreshCaptcha = () => {
    setCaptcha(randomCaptcha())
  }
  // 效验验证码
  const validateCaptcha = (_: any, value: string) => {
    if (!value) {
      return Promise.reject(new Error('验证码不能为空'))
    }
    if (value.toUpperCase() !== captcha.toUpperCase()) {
      return Promise.reject(new Error('验证码不正确'))
    }
    return Promise.resolve()
  }

  return (
    <div className={styles.bgbox}>
      {/* <Button onClick={qh}>{t('login.yy')}</Button> */}
      <Select className={styles.btn}
        defaultValue="中文"
        style={{ width: 120 }}
        onChange={qh}
        options={[
          { value: 'zh', label: '中文' },
          { value: 'en', label: 'English' },
          { value: 'jp', label: '日本語' },
        ]}
      />
      <Form
        className={styles.formbox}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 400 }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <h1 style={{ fontSize: '30px', fontWeight: 'bold' }}>{t('login.login')}</h1>
        <Form.Item<FieldType>
          label={t('login.user')}
          name="username"
        // rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label={t('login.password')}
          name="password"
        // rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item name='captcha' label={t('login.code')}>

          <div style={{ display: 'flex', gap: 10 }}>
            <Input style={{ flex: 1 }} />
            <div
              ref={captchaRef}
              onClick={refreshCaptcha}
              style={{
                flex: 1,
                maxWidth: 120,
                height: 40,
                backgroundColor: '#f0f2f5',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                cursor: 'pointer',
                userSelect: 'none',
                letterSpacing: '5px',
                fontSize: 16,
                fontWeight: 'bold',
                color: '#333',
                transition: 'opacity 0.3s ease'
              }}
            >
              {captcha}
            </div>
          </div>
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" block htmlType="submit">
            {t('login.login')}
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}


export default App;